<template>
  <div v-if="$Check(detail)" class="song-list-detail container">
    <blur-background height="200px" :bg="this.detail['coverImgUrl']">

      <!--歌单详情-->
      <detail-show :detail="detail" v-loading="loading_one"/>

      <el-card :body-style="{ padding: '15px 10px 10px 10px', boxSizing: 'border-box' }">
        <el-tabs class="tabs align-left" v-model="selected">
          <el-tab-pane label="歌曲列表" name="song-tracks" :lazy="true">

<!--          歌曲列表-->
            <better-song-track :id="$route.params.id"/>

          </el-tab-pane>
          <el-tab-pane label="评论" name="comments" :lazy="true">

<!--          评论列表-->
            <comment-area :id="$route.params.id"/>

          </el-tab-pane>
          <el-tab-pane label="收藏者" name="collect" :lazy="true">

<!--          收藏者列表-->
            <SongsSubscribers :id="$route.params.id" :total="detail['subscribedCount']"/>

          </el-tab-pane>
        </el-tabs>
      </el-card>

    </blur-background>
  </div>
</template>

<script>
  import { song_list_detail } from "@/network/request_show";

  import DetailShow from "@/components/pages/SongsListDetail/DetailShow";
  import CommentArea from "@/components/content/complound/CommentArea";
  import BetterSongTrack from "@/components/content/complound/BetterSongTrack";
  import SongsSubscribers from "@/components/content/complound/SongsSubscribers";
  import BlurBackground from "@/components/common/BlurBackground";

  export default {
    name: "SongsListDetail",
    components: {
      BlurBackground,
      SongsSubscribers,
      BetterSongTrack, CommentArea, DetailShow
    },

    data() {
      return {
        detail: null,
        selected: 'song-tracks',
        loading_one: true,
      }
    },

    created() {
      this.loadData()
    },

    methods: {

      loadData() {
        this.loading_one = true
        song_list_detail(this.$route.params.id).then(result => {
          this.detail = result['playlist']
          this.loading_one = false
        })
      },
    },

    watch: {
      '$route' (to, from) {
        if(to.params.id !== from.params.id){
          this.loadData()
        }
      }
    },
  }
</script>

<style scoped>
  .song-list-detail.container {
    min-width: 600px;
    padding: 10px 20px 10px 20px;
  }
</style>
